import { useState } from 'react';
import { Plus } from 'lucide-react';

import { postCreateTask } from '@/axios/taskBoard';
import { AlertAnswer } from '@/components/Customs/AlertAnswer';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import clsx from 'clsx';

interface Props {
  className?: string;
  columnId?: number;
}

export const BoardFooter = ({ className, columnId }: Props) => {
  const [taskTitle, setTaskTitle] = useState<string>('');
  const [autoCreate, setAutoCreate] = useState<boolean>(false);

  const addNewTask = (auot: number = 0) => {
    postCreateTask({
      params: {
        name: taskTitle,
        auto: auot,
        project_id: '6605871a2f8d9',
        column_id: columnId ? columnId.toString() : '0'
      }
    });
    setTaskTitle('');
    setAutoCreate(false);
  };
  return (
    <div className={clsx(className, 'flex gap-2')}>
      <Input
        type='text'
        placeholder='Название задачи'
        value={taskTitle}
        onChange={(e) => setTaskTitle(e.target.value)}
        className='focus-visible:-ring-offset-1'
      />
      <Button onClick={() => setAutoCreate(true)} disabled={taskTitle === ''}>
        <Plus />
      </Button>
      <AlertAnswer
        open={autoCreate}
        cancel={() => addNewTask(0)}
        accept={() => addNewTask(1)}
        text='Создать автоматический подзадачи?'
      />
    </div>
  );
};
